<template>
  <div w-full h-screen box-border pa-40px overflow-hidden :style="{ backgroundColor: curTopic.bgColor }">
    <div w-full flex flex-col items-center bg-white rounded-40px py-54px h-1840px overflow-auto>
      <div w-full text-40px box-border px-60px>
        <nut-swiper
          w-full
          h-700px
          :pagination-visible="false"
          :loop="true"
          ref="swiper"
          :is-prevent-default="false"
          :is-stop-propagation="false"
          :auto-play="5000">
          <nut-swiper-item v-for="(item, index) in swipers" :key="item">
            <img w-full h-full :src="item" rounded-20px />
          </nut-swiper-item>
        </nut-swiper>
        <div mt-30px line-clamp-2>{{goodsInfo.goodsName}}</div>
        <div text-32px text="#999" mt-20px>
          需要积分:
          <span text="#FF0000" text-40px font-bold>{{goodsInfo.needPoints}}</span>
        </div>
        <div class="title">详情</div>
        <div class="rich-text" mt-60px pb-30 v-html="goodsInfo.intro"></div>
      </div>
    </div>
  </div>
  <back></back>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useConfigStore } from '@/store/modules/config'
import back from '@/components/back/index.vue'
import { getGoodsInfo } from '@/api/index'
import { startRedirectToHome, stopRedirectToHome } from '@/utils/screenSaver'

const route = useRoute()
const router = useRouter()
const configStore = useConfigStore()
const curTopic = configStore.topics
const goodsInfo = ref({})

const id = ref(route.query.id)

const swipers = ref([])
// 数据初始化
async function init() {
  getGoodsInfo({ id: id.value }).then(res => {
    swipers.value = res.data.goodsImgStr.split(',')
    res.data.intro = res.data.intro.replace(/<img /g, '<img style="width:100%;height:auto;display:block;" ').replace(/<video /g, '<video style="width: 100%;max-width:100%;height:auto;display:block;" ')
    goodsInfo.value = res.data
  })
}


const resetTimer = () => {
  startRedirectToHome() // 重置跳转逻辑
}

onMounted(() => {
  init()
  startRedirectToHome()
  // 监听用户操作事件
  document.addEventListener('click', resetTimer)
  document.addEventListener('touchstart', resetTimer)
})

onUnmounted(() => {
  stopRedirectToHome()
  // 移除用户操作事件监听
  document.removeEventListener('click', resetTimer)
  document.removeEventListener('touchstart', resetTimer)
})
</script>

<style scoped lang="scss">
.title {
  position: relative;
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 38px;
  font-weight: bold;
  margin-top: 60px;
  margin-bottom: 10px;
  &:before {
    content: '';
    position: absolute;
    left: -20px;
    width: 10px;
    height: 40px;
    border-radius: 8px;
    // background-color: v-bind('curTopic.mainColor');
    background-color: #fcc300;
  }
}
</style>
